<template>
    <div class="topics" :class="loadingPage && 'g-loadingPage'">
        <c-header :title="title" leftType="menu">
            <div @click="newTopic" slot="right">
                <!-- <i class="fa fa-plus-square-o" aria-hidden="true"></i> -->
                <i class="fa fa-plus" aria-hidden="true"></i>
            </div>
        </c-header>
        <section class="body" ref="divScroll">
            <TopPrompt :options="topPrompt"></TopPrompt>
            <div v-if="showFixedTop" @click="evtFixedTop" class="m-fixedTop">
                <i class="fa fa-angle-double-up" aria-hidden="true"></i>
            </div>
            <div class="list">
                <transition-group appear tag="div" name="test"
                        v-on:before-enter="beforeEnter"
                        v-on:enter="enter"
                        v-on:before-leave="beforeLeave">
                    <div v-bind:data-index="index" :key="item.id" @click="toTopic(item.id)" v-for="(item,index) in listData" class="listLi">
                        <div class="title">
                            <span v-text="formatTabBtn(item.top,item.good,item.tab,false)" :class="formatTabBtn(item.top,item.good,item.tab,true)"></span>
                            <h3>{{item.title}}</h3>
                        </div>
                        <div class="user">
                            <div @click="toUserProfile(item.author.loginname)" class="avatar m-avatar">
                                <img :src="item.author.avatar_url" alt="">
                            </div>
                            <div class="info">
                                <div class="name">
                                    {{item.author.loginname}}
                                    <p class="num">
                                        <span class="g-color">{{item.reply_count}}</span>/{{item.visit_count}}
                                    </p>
                                </div>
                                <div class="time">
                                    <span>6月前</span>
                                    <span class="g-fr">3天前</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </transition-group>
                <div v-if="loadingList" class="loader-inner ball-pulse">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
import Share from './../share'
import * as API from '../api'
import cHeader from './Header'
import TopPrompt from './TopPrompt'

let beforeTab='';

export default {

    name: 'topics',

    mixins: [Share],

    components: {
        TopPrompt,
        cHeader,
    },

    data() {
        return {
            loadingList:false,
            loadingPage: false,
            listData: [],
            showFixedTop:false,
            ajaxData: {
                tab: 'all',
                page: 1,
                limit: 20,
            },
            topPrompt:{
                display:false,
                type: 'error',
                text: '',
                timeout: 3000,
            }
        }
    },

    created() {
        var tthis = this;
        this.mActivated();
    },

    activated() {
        // this.mActivated();
    },

    // deactivated(){},

    computed: {
     
        title(){
            var str;
            if(this.ajaxData.tab == 'all'){
                str = '全部'
            }else if(this.ajaxData.tab == 'good'){
                str = '精华'
            }else if(this.ajaxData.tab == 'share'){
                str = '分享'
            }else if(this.ajaxData.tab == 'ask'){
                str = '问答'
            }else if(this.ajaxData.tab == 'job'){
                str = '招聘'
            }else {
                str = '未命名'
            }
            return str;
        },
        userInfo() {
            return this.$store.state.user.userInfo;
        },
        queryId() {
            return this.$route.query.id;
        },
        listAnimateName(){
            var anName = 'fadeInUp',
                tabName = this.ajaxData.tab;
            if(tabName == 'all'){
                // anName= 'fadeInUp'
            }else if(tabName == 'good'){
                // anName= 'fadeInRightBig'
            }else if(tabName == 'share'){
                // anName= 'pulse'
            }else if(tabName == 'ask'){
                // anName= 'flipInX'
            }else if(tabName == 'job'){
                // anName= 'zoomIn'
            }
            return anName;
        }
    },

    methods: {

        evtFixedTop(){
            this.$refs.divScroll.scrollTop = 0;
        },

        onScroll(el){
            // showFixedTop
            let scrollTop = el.scrollTop,
                clientHeight = el.clientHeight;
            if(scrollTop > clientHeight * 1.2){
                this.showFixedTop = true;
            }else{
                this.showFixedTop = false;
            }
        },

        onScrollBottom(){
            this.getTopics();
        },

        newTopic(){
            this.topPrompt.display = true;
            this.topPrompt.text = '抱歉,暂未开放！';
        },

        mActivated(){
            var tthis = this,
                routerTab = this.$route.query.tab;

            this.topPrompt.display = false;

            if(this.$route.query.tab){
                this.ajaxData.tab = routerTab;
            }
            // console.log(beforeTab)
            // console.log(routerTab)
            if(beforeTab != routerTab){
                this.listData = [];
                this.ajaxData.page = 1;
                this.getTopics();
            }
            beforeTab = this.ajaxData.tab;
        },

        beforeEnter(el){
            el.style.visibility = 'hidden';
        },

        enter(el, done){
            let tthis = this,
                index = el.dataset.index - (this.ajaxData.page - 2) * this.ajaxData.limit;
            setTimeout(function(){
                el.style.visibility = 'visible';
                var vClass= el.getAttribute('class');
                el.className = vClass + ' animated ' + tthis.listAnimateName;
                done();
            },index * 150);
        },

        beforeLeave(el){
            el.style.visibility = 'hidden';
        },

        getTopics() {
            var tthis = this;
            if (!tthis.loadingList) {
                tthis.loadingList = true;
                API.topics({
                    data: tthis.ajaxData,
                    success(response) {
                        if (response) {
                            tthis.listData = tthis.listData.concat(response.data);
                            tthis.ajaxData.page++;
                        }
                    },
                    complete() {
                        tthis.loadingList = false;
                    }
                })
            }
        },

    },

     watch: {
        '$route.query.tab': function(newVal) {
            var tthis = this;
            if (tthis.$route.name == 'topics') {
                tthis.mActivated();
            }
        }
    }
}

</script>
<style lang="less" scoped>
.listLi {
    padding: 10px;
    min-height: 90px;
    border-bottom: 1px solid #ccc;
    animation-duration: .3s;
    &:last-child{
        border-bottom: 0;
    }
    .title {
        span {
            float: left;
            color: #fff;
            font-size: 13.8px;
            padding: 1px 4px;
            margin-right: 10px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
            display: inline-block;
        }
        h3 {
            color: #333;
            font-weight: 600;
            font-size: 16px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
    .user {
        padding-top: 6px;
        width: 100%;
        overflow: hidden;
        display: flex;
        .avatar {}
        .info {
            padding-top: 5px;
            padding-left: 10px;
            flex: 1;
            .num {
                float: right;
                font-size: 14px;
            }
            .time2 {
                float: right;
            }
        }
    }
}
</style>
